import Home from '../pages/Home'
// import About from '../pages/About'
// BrowserRouter声明的是history的路由模式
// Routes包裹Route，相当于路由出口
// Route让组件和路由对应
import { BrowserRouter, Routes, Route, useRoutes, Navigate } from 'react-router-dom'
import { lazy, Suspense ,useEffect} from 'react'

// 路由懒加载
// const Home = lazy(() => import('../pages/Home'))
const NotFound = lazy(() => import('../pages/NotFound'))
const Data = lazy(() => import('../pages/Data'))
const User = lazy(() => import('../pages/User'))
const Login = lazy(() => import('../pages/Login'))
const UserInfo = lazy(() => import('../pages/UserInfo'))

const routes = [
    {
        path: '/',
        element: <Home></Home>
    },
    {
        path: '/data',
        element: <Data></Data>
    }
    ,
    {
        path: '/user',
        element: <User></User>
    },
    {
        path: '/userinfo',
        element: <UserInfo></UserInfo>
    },
    {
        path: '/404',
        element: <NotFound></NotFound>
    },
    {
        path: '*',
        element: <Navigate to='/404'></Navigate>
    },
    {
        path: '/login',
        element: <Login></Login>
    }
]

// 让路由生效
function RouterList() {
    let element = useRoutes(routes)
    return element
}

function Router() {
    return (
        // <BrowserRouter>
        <Suspense fallback={<div>loading...</div>}>
            <RouterList></RouterList>
        </Suspense>
        // </BrowserRouter>
    )
}

export default Router